<template>
  <div class="index">
    <index>
      <div class="top box utils-relative-zIndex" slot="top">
        <!-- 台灯：一把台灯，一杆笔，一个夜晚，一个奇迹 -->
        <cancel panel="cameraPanel"></cancel>
        <my-table title="设备参数列表" :data="data"></my-table>
      </div>
      <div class="bottom box utils-relative-zIndex" slot="middle">
        <!-- <div id="filo"></div> -->
        <label for="switch" class="" style="cursor: pointer;" @click="switchLight()"
          :class="{ light: lightStatus === true }"></label>
      </div>
    </index>
  </div>
</template>

<script>
  import index from '../index.vue';
  import myTable from '../../utils/table.vue';
  import { MqttUtil } from '@/utils/MqttUtil.js';
  var time;
  export default {
    components: {
      index,
      myTable
    },
    data() {
      return {
        isLight: true,
        lightStatus: false,
        data: [{
            tag: '生厂商',
            data: ['海尔兄弟公司']
          },
          {
            tag: '设备型号',
            data: ['落地式长杆台灯']
          },
          {
            tag: '状态',
            data: ['正常']
          },
          {
            tag: '位置',
            data: ['火炬小学']
          }
        ],
        mqtt: null
      };
    },
    created() {
      this.initMqtt();
    },
    methods: {
      initMqtt() {
        console.log("执行了");
        this.mqtt = new MqttUtil(`mqtt://${this.mqtt_mixin.url}`);
        this.$utils.util.isStatus(() => {
          console.log("被控制端-灯");
          // this.mqtt = new MqttUtil(`mqtt://${this.mqtt_mixin.url}`);
          this.mqtt.setSubTopic('check_light');
          this.mqtt.subTopic((top, message) => {
            message = JSON.parse(message.toString());
            console.log('接受事件-灯光');
            this.switchLight();
          });
        }, 'sub');
      },
      checkPanel(panel) {
        return;
        this.$store.commit('changePanel', panel);
      },
      async switchLight() {
        this.lightStatus = !this.lightStatus;
        this.$utils.util.isStatus(() => {
          // this.mqtt = new MqttUtil(`mqtt://${this.mqtt_mixin.url}`);
          console.log('点击事件-灯光');
          this.mqtt.pubTopic('check_light', JSON.stringify({ type: true }));
        }, 'pub');
      }
    }
  };
</script>

<style lang="less" scoped>
  label {
    width: 101px;
    height: 101px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    // margin-left: -24px;
    border-radius: 100%;
    // -webkit-animation: oscillaLampadina 0.9s ease-in-out 0s infinite alternate;
    // animation: oscillaLampadina 0.9s ease-in-out 0s infinite alternate;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0px 1px 5px rgba(255, 255, 255, 0.1), inset 0px 2px 20px rgba(255, 255, 255, 0.07), -80px -15px 15px -5px rgba(0, 0, 0, 0.1);

    &::after {
      content: ' ';
      // width: 55px;
      // height: 55px;
      top: 20%;
      position: absolute;
      left: 20%;
      transform: translateX(-50%, -50%);
      margin-left: 15px;
      border-radius: 100%;
      border: 2px solid rgba(255, 255, 255, 0.1);
    }
  }

  .index {
    height: 100%;

    .box {
      height: 100%;
      width: 100%;
      // border: 1px dashed blue;
    }

    .top {
      box-sizing: border-box;
      padding: 10px 10px;
      overflow: outo;
    }

    .bottom {
      position: relative;
    }
  }

  @keyframes oscillaFilo {
    from {
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
    }

    to {
      -webkit-transform: rotate(-6deg);
      transform: rotate(-6deg);
    }
  }

  @keyframes oscillaLampadina {
    from {
      -webkit-transform: rotate(3deg) translate(-16.4px, -1px);
      transform: rotate(3deg) translate(-16.4px, -1px);
    }

    to {
      -webkit-transform: rotate(-3deg) translate(16.4px, -1px);
      transform: rotate(-3deg) translate(16.4px, -1px);
    }
  }

  .light {
    background: white;
    -webkit-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8), 0px 0px 30px rgba(255, 255, 255, 0.8), 0px 0px 50px rgba(255, 255, 255, 0.6), 0px 0px 70px rgba(255, 255, 255, 0.6),
      -80px -15px 120px 0px rgba(255, 255, 255, 0.4);
    -ms-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8), 0px 0px 30px rgba(255, 255, 255, 0.8), 0px 0px 50px rgba(255, 255, 255, 0.6), 0px 0px 70px rgba(255, 255, 255, 0.6),
      -80px -15px 120px 0px rgba(255, 255, 255, 0.4);
    -o-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8), 0px 0px 30px rgba(255, 255, 255, 0.8), 0px 0px 50px rgba(255, 255, 255, 0.6), 0px 0px 70px rgba(255, 255, 255, 0.6),
      -80px -15px 120px 0px rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8), 0px 0px 30px rgba(255, 255, 255, 0.8), 0px 0px 50px rgba(255, 255, 255, 0.6), 0px 0px 70px rgba(255, 255, 255, 0.6),
      -80px -15px 120px 0px rgba(255, 255, 255, 0.4);

    &::after {
      content: ' ';
      width: 15px;
      height: 15px;
      top: 0;
      position: absolute;
      left: 0;
      margin-left: 15px;
      border-radius: 100%;
      border: 2px solid rgba(255, 255, 255, 0.03);
    }
  }
</style>
